<script setup lang="ts">
import { computed, watch } from "vue";
import { ArrowDown, ArrowUp, Refresh, Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import TagSelector from "@/components/tag-selector/TagSelector.vue";
import { ACCOUNT_TAGS } from "@/api/constants";
import { renderNumberCell } from "@/utils/cell";

defineOptions({
  name: "account-header"
});

interface AccountHeaderProps {
  totalBalance?: number;
  totalPnl?: number;
  lastUpdateTime?: string;
  isLoading?: boolean;
}

const {
  totalBalance = 0,
  totalPnl = 0,
  lastUpdateTime = "",
  isLoading = false
} = defineProps<AccountHeaderProps>();

const modelAccountSearch = defineModel<string>("accountSearch", {
  default: ""
});
const modelsymbolSearch = defineModel<string>("symbolSearch", {
  default: ""
});

const emit = defineEmits<{
  (e: "expand-all"): void;
  (e: "collapse-all"): void;
  (e: "refresh"): void;
}>();

const formattedUpdateTime = computed(() =>
  lastUpdateTime ? dayjs(lastUpdateTime).format("HH:mm:ss") : "00:00:00"
);

const totalBalanceWanVNode = computed(() =>
  renderNumberCell(totalBalance, 2, true, false, true)
);

const totalPnlWanVNode = computed(() =>
  renderNumberCell(totalPnl, 2, true, true, true)
);

// Watch symbolSearch and expand all rows when symbolSearch is not empty
watch(
  modelsymbolSearch,
  newValue => {
    if (newValue) {
      emit("expand-all");
    }
  },
  // search string changes will first trigger account table to update,
  // we expand the table after the update
  { flush: "post" }
);
</script>

<template>
  <div
    name="account-header-container"
    class="bg-bg_color rounded-sm p-1 whitespace-nowrap shadow sm:p-2 md:p-3"
  >
    <!-- First Row -->
    <div name="first-row" class="flex-bc">
      <div name="left-section" class="flex-c gap-1 sm:gap-2">
        <el-input
          v-model="modelAccountSearch"
          class="max-sm:hidden!"
          placeholder="搜索账户名称"
          clearable
          size="small"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-input
          v-model="modelsymbolSearch"
          placeholder="搜索合约代码"
          clearable
          size="small"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-button
          class="m-0!"
          type="primary"
          size="small"
          :icon="ArrowDown"
          @click="emit('expand-all')"
        >
          <span class="m-0! max-sm:hidden!">展</span><span>开</span>
        </el-button>

        <el-button
          class="m-0!"
          type="primary"
          size="small"
          :icon="ArrowUp"
          @click="emit('collapse-all')"
        >
          <span>收</span><span class="m-0! max-sm:hidden!">起</span>
        </el-button>
      </div>
      <el-button
        size="small"
        :icon="Refresh"
        :loading="isLoading"
        @click="emit('refresh')"
      >
        <span class="max-md:hidden!">更新：</span>
        <span>{{ formattedUpdateTime }}</span>
      </el-button>
    </div>

    <!-- Divider -->
    <div class="my-1 h-px bg-[var(--el-border-color-lighter)] sm:my-2" />

    <!-- Second Row -->
    <div
      name="second-row"
      class="grid grid-cols-1 sm:grid-cols-2 sm:items-center"
    >
      <div class="flex items-center justify-start">
        <span class="mr-2 text-xs text-gray-500 max-md:hidden!">账户标签:</span>
        <TagSelector v-model="modelAccountSearch" :tags="ACCOUNT_TAGS" />
      </div>
      <!-- divider -->
      <div class="my-1 h-px bg-[var(--el-border-color-lighter)] sm:hidden" />
      <div
        class="flex-c gap-1 text-xs text-gray-500 sm:justify-self-end md:gap-2 md:text-sm"
      >
        <div>
          <span class="mr-1">总权益:</span>
          <component :is="totalBalanceWanVNode" />
        </div>
        <div
          class="mx-1 h-4 w-px bg-[var(--el-border-color-lighter)] sm:mx-2"
        />
        <div>
          <span class="mr-1">总盈亏:</span>
          <component :is="totalPnlWanVNode" />
        </div>
      </div>
    </div>
  </div>
</template>
